<template>
	<div>
		<BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
			<template #toolbar>
				<a-button type="primary" @click="handleCreate">新增菜单</a-button>
			</template>
			<template #bodyCell="{column,  record }">
				<template v-if="column.key === 'action'">
					<TableAction :actions="[
						{
							icon: 'clarity:note-edit-line',
							tooltip: '修改',
							onClick: handleEdit.bind(null, record)
						},
						{
							icon: 'ant-design:delete-outlined',
							color: 'error',
							popConfirm: {
								title: '是否确认删除',
								 placement: 'left',
								confirm: handleDelete.bind(null, record)
							}
						}
					]" />
				</template>
			</template>
		</BasicTable>
		<MenuDrawer @register="registerDrawer" @success="handleSuccess" />
	</div>
</template>
<script lang="ts" setup>
	import { nextTick } from 'vue';
	import { BasicTable, useTable, TableAction } from '/@/components/Table';
	import { menuCheckChild, menuDel, menuList } from '/@/api/system/menu';
	import { useDrawer } from '/@/components/Drawer';
	import MenuDrawer from './MenuDrawer.vue';
	import { columns, searchFormSchema } from './menu.data';
	import { useMessage } from '/@/hooks/web/useMessage';
	const { createMessage } = useMessage();

	const [registerDrawer, { openDrawer }] = useDrawer();
	const [registerTable, { reload, expandAll, collapseAll }] = useTable({
		title: '菜单列表',
		api: menuList,
		columns,
		formConfig: {
			labelWidth: 80,
			showResetButton:false,
			baseColProps: { span: 24 },
			schemas: searchFormSchema
		},
		isTreeTable: true,
		pagination: false,
		striped: false,
		useSearchForm: true,
		showTableSetting: true,
		bordered: true,
		showIndexColumn: false,
		canResize: false,
		tableSetting: {
			fullScreen: true
		},
		actionColumn: {
			width: 180,
			title: '操作',
			dataIndex: 'action',
			fixed: undefined
		}
	});

	function handleCreate() {
		openDrawer(true, {
			isUpdate: false
		});
	}

	function handleEdit(record : Recordable) {
		openDrawer(true, {
			record,
			isUpdate: true
		});
	}

	async function handleDelete(record : Recordable) {
		const result = await menuCheckChild({ id: record.id });
		if (result === true) {
			createMessage.error('此菜单下面包含子菜单，不能删除!');
			return;
		}
		await menuDel({ ids: record.id });
		createMessage.success('删除成功!');
		handleSuccess();
	}

	function handleSuccess() {
		reload();
	}

	function onFetchSuccess() {
		nextTick(expandAll);
	}
</script>